<template>
	<view>
    <view class="content">
      <view class="filter-btn" >
        <!-- <view class="filter-btn-item" @tap="change(1)" :class="{'filter-btn-active':dataType == 1}">政策指引</view> -->
        <!-- <view class="filter-btn-item" @tap="change(2)" :class="{'filter-btn-active':dataType == 2}">业务培训</view> -->
        <scroll-view
          class="top-menu-view"
          scroll-x="true"
          :scroll-left="scrollLeft"
        >
          <block v-for="(menuTab, index) in titleList" :key="index">
            <view
              class="menu-topic-view"
              v-bind:id="'tabNum' + index"
              @click="swichMenu(menuTab,index)"
            >
              <view
                :class="[
                  currentTab == index ? 'menu-topic-act' : 'menu-topic',
                ]"
              >
                <view class="menu-topic-txt">{{ menuTab.name }}</view>
                <view class="menu-topic-bottom">
                  <view class="menu-topic-bottom-color"></view>
                </view>
              </view>
            </view>
          </block>
        </scroll-view>
      </view>
      <scroll-view class="record-box" scroll-y="true" ref="dataList" lower-threshold="50" @scrolltolower="pageHandler">
        <view class="record-main">
          <view class="record" v-for="(item,index) in dataList" :key="index" @click="goDetail(item)">
            <view class="record-item">
              <view class="record-item-title">{{item.name}}</view>
              <!-- <view class="record-item-desc">
                <text class="text-item">类型：{{item.typeName}}</text>
                <text class="text-item">发布时间：{{dayjs(item.moditime).format('YYYY-MM-DD')}}</text>
              </view> -->
            </view>
            <!-- <view class="record-icon">
              <view>
                <icon type="info" size="26"/>
              </view>
              <text>预览</text>
            </view> -->
          </view>
          <!-- <view class="no-more">{{ dataText }}</view> -->
        </view>
      </scroll-view>
    </view>
	</view>
</template>

<script>
import { getPolicyList, getTrainingList,getData } from "@/api";
import dayjs from 'dayjs'

export default {
  data() {
    return {
      dayjs,
      dataType: '1',
      recordList:[],
      total: 0,
      pageNum: 1,
      size: 10,
      finished: false,
      dataText: '暂无数据',
      titleList:[], // 一级菜单
      currentTab:0,
      dataList: [], // 二级菜单
    }
  },
  onLoad() {
    uni.showLoading();
    this.getList();
  },
  methods: {
    change(e) {
      this.recordList = [];
      this.finished = false;
      this.dataType = e;
      this.pageNum = 1;
      this.total = 0;
      uni.showLoading();
      // this.getDataList();
    },
    pageHandler() {
      // if (!this.finished) {
      //   this.pageNum ++;
      //   // this.getDataList();
      // }
    },
    // getDataList() {
    //   console.log('pageNum=', this.pageNum);
    //   const data = {
    //     pageNum: this.pageNum,
    //     pageSize: this.size,
    //   };
    //   const request = this.dataType == 2 ? getTrainingList : getPolicyList;
    //   request(data).then((res) => {
    //     console.log('res===', res);
    //     if(res.records) {
    //       this.recordList = [...this.recordList, ...res.records];
    //       this.total = res.total;
    //       if(this.recordList.length === this.total) {
    //         this.finished = true;
    //       }
    //       if (this.total) {
    //         this.dataText = this.finished ? '没有更多数据' : '加载更多';
    //       }
    //     }
    //     uni.hideLoading();
    //   });
    // },
    getList(pid){
      getData('businessTraining','get',pid?{pid}:{}).then((res) => {
        console.log('res===', res);
        if(pid){
          this.dataList = res;
        }else{
          this.titleList = res
          if(res && res.length){
            this.getList(res[0].rainingTypeId)
          }
        }
        uni.hideLoading();
      });
    },
    swichMenu: async function(menuTab,index) {
      //点击其中一个 menu
      if (this.currentTab == index) {
        return false;
      } else {
        this.currentTab = index;
        this.getList(menuTab.rainingTypeId)
      }
    },
    goDetail(row) {
      uni.navigateTo({
        url: `/packageAlpha/pages/workHelp/secondList?typeId=${row.rainingTypeId}&title=${row.name}`,
      })
    }
  }
}
</script>

<style lang="scss" scoped>
	.content{
		height: 100vh;
    display: flex;
    flex-direction: column;
	}
	.filter-btn{
    display: flex;
		flex-wrap:wrap;
    background-color: #fff;
    padding: 0 51rpx;
    padding-top: 34rpx;
  	justify-content:center;
    font-size: 30rpx;
		&-item{
			flex-basis: 126rpx;
			padding-bottom: 20rpx;
			text-align: center;
      white-space: nowrap;
      margin: 0 40rpx
		}
		&-active{
      color: #2C9AF1;
      border-bottom:3px solid #2C9AF1;
    }
	}
  .record-box {
    flex: 1;
    background-color: #f9f9f9;
    overflow-y: scroll;
  }
	.record-main{
		padding:30rpx 32rpx;
		box-sizing: border-box;
    .record{
      width: 100%;
      box-sizing: border-box;
      background-color: #fff;
      padding:26rpx 32rpx;
      border-radius: 10rpx;
      box-shadow: 0px 0px 10px rgba(229, 229, 229, 1);
      margin-bottom: 30rpx;
      display: flex;
      align-items: center;
      font-size: 30rpx;
      &-item{
        flex: 1;
        &-title{
          color: #333;
          font-size: 34rpx;
          line-height: 46rpx;
          // margin-bottom: 20rpx;
        }
        &-desc{
          color: #999;
          font-size: 30rpx;
          line-height: 40rpx;
        }
        &-status{
          color: #66DD55;
          padding: 9rpx 31rpx;
          margin-left: 32rpx;
          border: 1px solid #66DD55;
        }
        &-error{
          color: #F15B53;
          border: 1px solid #F15B53;
        }
      }
      .text-item {
        margin-right: 40rpx;
        &:last-child {
          margin-right: none;
        }
      }
    }
    .record-icon {
      text-align: center;
    }
    .no-more{
      color: #999999;
      font-size: 30rpx;
      margin: 20rpx 0;
      text-align: center;
      height: 80rpx;
    }
	}
  .top-menu-view {
  display: flex;
  white-space: nowrap;
  width: 100%;
  background-color: #ffffff;
  height: 86upx;
  // border-top: 1px solid #d8dbe6;
  // border-bottom: 1px solid #d8dbe6;
}

.top-menu-view .menu-topic-view {
  display: inline-block;
  white-space: nowrap;
  height: 86upx;
  position: relative;
}

.top-menu-view .menu-topic-view .menu-topic {
  margin-right:30rpx;
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.top-menu-view .menu-topic-view .menu-topic:first-child {
}
.top-menu-view .menu-topic-view:last-child .menu-topic {
  margin-right: 80upx;
}

.top-menu-view .menu-topic-view .menu-topic .menu-topic-txt {
  font-size: 30rpx;
  color: #666666;
}

.top-menu-view .menu-topic-view .menu-topic .menu-topic-bottom {
  position: absolute;
  bottom: 0;
  width: 100%;
}

.top-menu-view
  .menu-topic-view
  .menu-topic
  .menu-topic-bottom
  .menu-topic-bottom-color {
  width: 100%;
  height: 4upx;
}

.top-menu-view .menu-topic-view .menu-topic-act {
  margin-right:30rpx;
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.top-menu-view .menu-topic-view:last-child .menu-topic-act {
  margin-right: 80upx;
}

.top-menu-view .menu-topic-view .menu-topic-act .menu-topic-txt {
  font-size: 30upx;
  color: #3d7eff;
  font-weight: 600;
}

.top-menu-view .menu-topic-view .menu-topic-act .menu-topic-bottom {
  position: absolute;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: center;
}

.top-menu-view
  .menu-topic-view
  .menu-topic-act
  .menu-topic-bottom
  .menu-topic-bottom-color {
  width: 100%;
  height: 6upx;
  background: #3d7eff;
}
</style>>
